<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧配镜 - 管理后台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
    </style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-blue-100 min-h-screen">
    <div class="flex h-screen">
        <!-- 侧边栏 -->
        <div class="w-64 bg-white shadow-lg">
            <div class="p-6">
                <h1 class="text-2xl font-bold text-blue-800">智慧配镜</h1>
                <p class="text-sm text-gray-500 mt-1">管理后台</p>
            </div>
            <nav class="mt-6">
                <div class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider">
                    主要功能
                </div>
                <a href="#" class="flex items-center px-4 py-3 text-blue-600 bg-blue-50">
                    <img src="https://unpkg.com/lucide-static@latest/icons/home.svg" class="w-5 h-5 mr-3">
                    控制台
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50">
                    <img src="https://unpkg.com/lucide-static@latest/icons/package.svg" class="w-5 h-5 mr-3">
                    商品管理
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50">
                    <img src="https://unpkg.com/lucide-static@latest/icons/clipboard-list.svg" class="w-5 h-5 mr-3">
                    订单管理
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50">
                    <img src="https://unpkg.com/lucide-static@latest/icons/users.svg" class="w-5 h-5 mr-3">
                    用户管理
                </a>
                <div class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider mt-4">
                    系统设置
                </div>
                <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50">
                    <img src="https://unpkg.com/lucide-static@latest/icons/settings.svg" class="w-5 h-5 mr-3">
                    系统设置
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50">
                    <img src="https://unpkg.com/lucide-static@latest/icons/database.svg" class="w-5 h-5 mr-3">
                    数据备份
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50">
                    <img src="https://unpkg.com/lucide-static@latest/icons/file-text.svg" class="w-5 h-5 mr-3">
                    操作日志
                </a>
            </nav>
        </div>

        <!-- 主内容区域 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部导航栏 -->
            <header class="bg-white shadow-sm">
                <div class="flex items-center justify-between px-6 py-4">
                    <div class="flex items-center">
                        <button class="p-2 rounded-lg hover:bg-gray-100">
                            <img src="https://unpkg.com/lucide-static@latest/icons/menu.svg" class="w-5 h-5">
                        </button>
                        <div class="ml-4">
                            <h2 class="text-lg font-semibold text-gray-900">控制台</h2>
                            <p class="text-sm text-gray-500">欢迎回来，管理员</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <button class="p-2 rounded-lg hover:bg-gray-100">
                            <img src="https://unpkg.com/lucide-static@latest/icons/bell.svg" class="w-5 h-5">
                        </button>
                        <div class="flex items-center">
                            <img src="https://ui-avatars.com/api/?name=管理员&background=0D8ABC&color=fff" class="w-8 h-8 rounded-full">
                            <span class="ml-2 text-sm font-medium text-gray-700">管理员</span>
                        </div>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <main class="flex-1 overflow-y-auto p-6">
                <!-- 数据概览 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-500">总销售额</p>
                                <p class="text-2xl font-semibold text-gray-900 mt-1">¥128,500</p>
                                <p class="text-sm text-green-600 mt-1">↑ 12.5%</p>
                            </div>
                            <div class="p-3 bg-blue-50 rounded-lg">
                                <img src="https://unpkg.com/lucide-static@latest/icons/dollar-sign.svg" class="w-6 h-6 text-blue-600">
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-500">订单数量</p>
                                <p class="text-2xl font-semibold text-gray-900 mt-1">1,234</p>
                                <p class="text-sm text-green-600 mt-1">↑ 8.2%</p>
                            </div>
                            <div class="p-3 bg-green-50 rounded-lg">
                                <img src="https://unpkg.com/lucide-static@latest/icons/shopping-cart.svg" class="w-6 h-6 text-green-600">
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-500">新增用户</p>
                                <p class="text-2xl font-semibold text-gray-900 mt-1">89</p>
                                <p class="text-sm text-green-600 mt-1">↑ 5.3%</p>
                            </div>
                            <div class="p-3 bg-purple-50 rounded-lg">
                                <img src="https://unpkg.com/lucide-static@latest/icons/users.svg" class="w-6 h-6 text-purple-600">
                            </div>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-gray-500">商品销量</p>
                                <p class="text-2xl font-semibold text-gray-900 mt-1">2,567</p>
                                <p class="text-sm text-green-600 mt-1">↑ 15.8%</p>
                            </div>
                            <div class="p-3 bg-yellow-50 rounded-lg">
                                <img src="https://unpkg.com/lucide-static@latest/icons/package.svg" class="w-6 h-6 text-yellow-600">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 最近订单 -->
                <div class="bg-white rounded-lg shadow-sm mb-6">
                    <div class="p-6 border-b border-gray-200">
                        <div class="flex items-center justify-between">
                            <h3 class="text-lg font-semibold text-gray-900">最近订单</h3>
                            <a href="#" class="text-sm text-blue-600 hover:text-blue-800">查看全部</a>
                        </div>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单号</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">客户</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#20240315001</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">张三</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥1,280</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 py-1 text-xs font-medium text-green-600 bg-green-100 rounded-full">已完成</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-15 10:30</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        <button class="text-blue-600 hover:text-blue-800">查看</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#20240315002</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">李四</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥2,560</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 py-1 text-xs font-medium text-yellow-600 bg-yellow-100 rounded-full">待发货</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-15 11:45</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        <button class="text-blue-600 hover:text-blue-800">查看</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#20240315003</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">王五</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">¥3,840</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 py-1 text-xs font-medium text-blue-600 bg-blue-100 rounded-full">待付款</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2024-03-15 13:20</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        <button class="text-blue-600 hover:text-blue-800">查看</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </main>
        </div>
    </div>
</body>
</html> 